<template>
    <div class="driverDuty">
      <div class="time-select">
        年月：2024-11
      </div>
      <div class="duty-list">
        <div class="duty-info" v-for="(item,index) in dutyList" :key=index>
          <div class="duty-time">{{ item.dutyTime }}</div>
          <div class="attendant-box">
            <div class="attendant">值班员：</div>
            <div class="attendant-name">{{ item.attendant }}</div>
            <div class="attendant-phone">{{ item.attendantPhone }}</div>
            <div class="iconfont icon-dianhua"></div>
          </div>
          <div class="driver-box">
            <div class="driver">值班司机：</div>
            <div class="driver-name">{{ item.driver }}</div>
            <div class="driver-phone">{{ item.driverPhone }}</div>
            <div class="iconfont icon-dianhua"></div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {
    
  },
  data() {
    return {
      dutyList:[
        {
          dutyTime:"2024-11-01",
          attendant:"石磊",
          attendantPhone:"13888888888",
          driver:"王硕",
          driverPhone:"13888888888",
        },
        {
          dutyTime:"2024-11-01",
          attendant:"石磊",
          attendantPhone:"13888888888",
          driver:"王硕",
          driverPhone:"13888888888",
        },
        {
          dutyTime:"2024-11-01",
          attendant:"石磊",
          attendantPhone:"13888888888",
          driver:"王硕",
          driverPhone:"13888888888",
        }
      ]
    };
  },
  props: {
    
  },
  computed: {
    
  },
  methods: {
    
  },
  created() {
    
  }
}
</script>

<style scoped lang="scss">
/*  */
.driverDuty {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
}
.time-select {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  background-color: #fff;
  line-height: 50px;
  margin: 10px 0;
  text-align: start;
  padding-left: 10px;
}
.duty-list {
  text-align: start;
  display: flex;
  flex-direction: column;
  .duty-info {
    box-sizing: border-box;
    margin: 8px auto;
    width: 96%;
    height: 120px;
    background-color: #fff;
    border: 1px solid #ccc;
    .duty-time {
      box-sizing: border-box;
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
    }
    .attendant-box {
      display: flex;
      justify-content: space-between;
      height: 40px;
      width: 85%;
      line-height: 40px;
      padding-left: 10px;
      .attendant {
        width: 100px;

      }
      
    }
    .driver-box{
      display: flex;
      justify-content: space-between;
      height: 40px;
      width: 85%;
      line-height: 40px;
      padding-left: 10px;
      .driver {
        width: 100px;


      }
    }
  }
}

@font-face {
  font-family: "iconfont"; /* Project id 4762378 */
  src: url('//at.alicdn.com/t/c/font_4762378_iwehgqqc6no.woff2?t=1733196394794') format('woff2'),
       url('//at.alicdn.com/t/c/font_4762378_iwehgqqc6no.woff?t=1733196394794') format('woff'),
       url('//at.alicdn.com/t/c/font_4762378_iwehgqqc6no.ttf?t=1733196394794') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-dianhua:before {
  content: "\e69b";
}
.icon-dianhua {
  font-size: 25px;
  text-align: right;
}
</style>